window.load = () => {

 
  const option1 = {
    tooltip: {
      trigger: 'item',
      formatter: '{a} <br/>{b} : {c} ({d}%)'
    },
    series: [
      {
        name: 'Area Mode',
        type: 'pie',
        roseType: 'area',
        itemStyle: {
          borderRadius: 5
        },
        data: [
          { value: 30, name: '区域 1' },
          { value: 28, name: '区域 2' },
          { value: 26, name: '区域 3' },
          { value: 24, name: '区域 4' },
          { value: 22, name: '区域 5' },
          { value: 20, name: '区域 6' },
          { value: 18, name: '区域 7' },
          { value: 16, name: '区域 8' }
        ]
      }
    ]
  };
  chart1.setOption(option1);

  const chart2 = echarts.init(document.getElementById('line-chart'));
  const option2 = {
    color: ["#4CDFF3", "#FE7BAB", "#7061FE", "#A6C787"],
    tooltip: {
        trigger: 'axis',
        backgroundColor: 'rgba(16,16,36,0.7)',
        textStyle: {
            color: 'rgb(225,225,255)'
        }
    },
    xAxis: {
        type: 'category',
        axisLine: {
            lineStyle: {
                color: '#dadada'
            }
        },
        data: ["1月", "2月", "3月", "4月", "5月", "6月", "7月", "8月", "9月", "10月", "11月", "12月"]
    },
    legend: {
        data: ["SO2", "NOx", "颗粒物", "VOCs"],
        right: 30,
        top: 0,
        textStyle: {
            color: '#dadada'
        }
    },
    yAxis: {
        name: "排放量(吨)",
        type: 'value',
        splitLine: { show: false },
        axisLine: {
            lineStyle: {
                color: '#dadada'
            }
        }
    },
    grid: [{
        right: 30,
        bottom: 30
    }],
    series: [
        {
            name: "SO2",
            symbol: "circle",
            //smooth: true,
            data: new Array(12).fill(0).map(item => {
                return Number((5 * Math.random()).toFixed(2));
            }),
            type: 'line'
        },
        {
            name: "NOx",
            symbol: "circle",
            //smooth: true,
            data: new Array(12).fill(0).map(item => {
                return Number((3 * Math.random()).toFixed(2));
            }),
            type: 'line'
        },
        {
            name: "颗粒物",
            symbol: "circle",
            //smooth: true,
            data: new Array(12).fill(0).map(item => {
                return Number((10 * Math.random()).toFixed(2));
            }),
            type: 'line'
        },
        {
            name: "VOCs",
            symbol: "circle",
            //smooth: true,
            data: new Array(12).fill(0).map(item => {
                return Number((8 * Math.random()).toFixed(2));
            }),
            type: 'line'
        }
    ]
  };
  chart2.setOption(option2);

  const chart3 = echarts.init(document.getElementById('bar-chart'));
  const option3 = {
    tooltip: {
        trigger: 'axis',
        backgroundColor: 'rgba(16,16,36,0.7)',
        textStyle: {
            color: 'rgb(225,225,255)'
        }
    },
    xAxis: {
        type: 'category',
        axisLine: {
            lineStyle: {
                color: '#dadada'
            }
        },
        data: ["1月", "2月", "3月", "4月", "5月", "6月", "7月", "8月", "9月", "10月", "11月", "12月"]
    },
    yAxis: {
        name: "排放量(吨)",
        type: 'value',
        splitLine: { show: false },
        axisLine: {
            lineStyle: {
                color: '#dadada'
            }
        }
    },
    grid: [{
        right: 30,
        bottom: 30
    }],
    series: [
        {
            name: "Waste",
            //smooth: true,
            data: new Array(12).fill(0).map(item => {
                return Number((5 * Math.random()).toFixed(2));
            }),
            type: 'bar',
            barWidth: 10,
            itemStyle: {
                normal: {
                    barBorderRadius: 5,
                    color: new echarts.graphic.LinearGradient(
                        0, 0, 0, 1,
                        [
                            { offset: 0, color: '#14c8d4' },
                            { offset: 1, color: '#43eec6' }
                        ]
                    )
                }
            }
        }
    ]
  };
  chart3.setOption(option3);


  const map = new AMap.Map('map', {
    zoom:12
  });

}